<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
      .wrap {
        font-size: 24px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrap"></div>
    <script>
      const foo = () => {
        console.log('foo', this);
        return this;
      };
      document.querySelector('.wrap').textContent = foo.apply(111);

      const message = 'hello world';
      // 箭头函数没有自己的this
      const obj = {
        message: 'hello',
        foo() {
          const bar = () => {
            console.log('bar', this); // obj
            console.log('message', message); // hello world !提醒：不会查找obj.message
          };
          return bar;
        },
      };
      const fn = obj.foo();
      fn.apply('123');
    </script>
  </body>
</html>
